<!-- MyTable组件 -->
<template>
  <div class="myTable">
    <el-table :data="tableData" stripe style="width: 100%" @selection-change="SelectionChange">
      <el-table-column v-if="mutiSelect" type="selection" style="width: 55px;">
      </el-table-column>
      <el-table-column v-for="(item,i) in tableTitle" :key="i" :label="item.label" :prop="item.prop" :width="item.width" :max-height="item.height" align="center">
        <template slot-scope="scope">
          <!-- 非render列 -->
          <template v-if="!item.render">
            <!-- 列formatter -->
            <template v-if="item.formatter">
              <span v-html="item.formatter(scope.row, item)"></span>
            </template>
            <!-- 普通列 -->
            <template v-else>
              {{scope.row[item.prop]}}
            </template>
          </template>
          <!-- render列 -->
          <template v-else>
            <MyRenderDom :column="item" :row="scope.row" :render="item.render" :index="scope.$index" />
          </template>
        </template>
      </el-table-column>
      <slot name="operate"></slot>
    </el-table>
    <pagination v-show="pagination.total>0" :total="pagination.total" :page.sync="pagination.pageNum" :limit.sync="pagination.pageSize" @pagination="getList" />
  </div>
</template>
<script>

export default {
  name: 'Table',
  components: {//组件 
    MyRenderDom: {//函数式组件
      functional: true,//设置为true 即表示该组件为一个函数组件
      props: {
        row: Object,
        render: Function,
        index: Number,
        column: {
          type: Object,
          default: null
        }
      },
      render: (h, ctx) => {
        const params = {
          row: ctx.props.row,
          index: ctx.props.index
        }
        if (ctx.props.column) params.column = ctx.props.column
        return ctx.props.render(h, params)
      }
    },
  },
  props: {
    tableData: {
      type: Array,
      default: () => {
        return []
      }
    },
    mutiSelect: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    tableTitle: {
      type: Array,
      default: () => {
        return []
      }
    },
    pagination: {
      type: Object,
      default: function () {
        return {
          pageSize: 2,
        }
      }
    }
  },
  data() {
    return {
      total: 100,
      contractVisible: false,
      contrDetail: {},
    }
  },
  methods: {
    SelectionChange(val) {//多行选中
      this.$emit('handleSelectionChange', val)
    },
    getList() {
      this.$emit('getList', true)
    }
    // getSize(val) {
    //   this.$set(this.page, 'curPage', 1)
    //   this.$emit('getPageTable', this.page.curPage, val)
    // },
    // getCurChange(val) {
    //   this.$emit('getPageTable', val, this.page.limit)
    // },
  },
}
</script>